<!-- subpkg_consult/medicine/timeline/index.vue -->
<script lang="ts" setup>
  import { getMedicalOrderLogistics } from '@/pages/apis/order'
  import type { ExpressData } from '@/types/order'
  import { onMounted, ref } from 'vue'

  // #ifdef H5
  import AMapLoader from '@amap/amap-jsapi-loader'
  import car from '@/static/images/car.png'
  import startImg from '@/static/images/start.png'
  import endImg from '@/static/images/end.png'
  // #endif
  const props = defineProps<{ id: string }>()

  const logisticsInfo = ref({} as ExpressData)
  const getData = async () => {
    const res = await getMedicalOrderLogistics(props.id)
    console.log(res)
    logisticsInfo.value = res
  }
  // getData()

  let map: any = null

  // #ifdef H5
  const initMap = async () => {
    try {
      window._AMapSecurityConfig = {
        securityJsCode: 'a43893d23150282bcffc1777a3d13c71',
      }
      const AMap = await AMapLoader.load({
        key: '95031c57ee2c8c1561f859fd7f935cc2', // 申请好的Web端开发者Key，首次调用 load 时必填
        version: '2.0', // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
        plugins: [], //需要使用的的插件列表，如比例尺'AMap.Scale'，支持添加多个如：['...','...']
      })
      map = new AMap.Map('map', {
        // 设置地图容器id
        viewMode: '3D', // 是否为3D地图模式
        zoom: 11, // 初始化地图级别
        center: [116.397428, 39.90923], // 初始化地图中心点位置
        mapStyle: 'amap://styles/whitesmoke',
      })
      AMap.plugin('AMap.Driving', () => {
        const driving = new AMap.Driving({
          map: map, // 指定轨迹显示地图实例
          showTraffic: false, // 关闭交通状态
          hideMarkers: true,
        })
        // 开始位置坐标
        const start = logisticsInfo.value.logisticsInfo.shift()
        // 结束位置坐标
        const end = logisticsInfo.value.logisticsInfo.pop()
        // 途经点，需要用 map 调整为经纬度数组(先长Long后短Lat)
        const waypoints = logisticsInfo.value.logisticsInfo.map((v) => [v.longitude, v.latitude])

        driving.search(
          [start?.longitude, start?.latitude],
          [end?.longitude, end?.latitude],
          { waypoints: waypoints },
          (status: string, result: object) => {
            console.log(status, result)
            const startMaker = new AMap.Marker({
              icon: startImg,
              position: [start?.longitude, start?.latitude],
              anchor: 'bottom-center',
            })
            map?.add(startMaker)
            const endMaker = new AMap.Marker({
              icon: endImg,
              position: [end?.longitude, end?.latitude],
              anchor: 'bottom-center',
            })
            map?.add(endMaker)
            const carMarker = new AMap.Marker({
              icon: car,
              position: [
                logisticsInfo.value.currentLocationInfo.longitude,
                logisticsInfo.value.currentLocationInfo.latitude,
              ],
              anchor: 'bottom-center',
            })
            map.add(carMarker)
            setTimeout(() => {
              map.setFitView([carMarker]) + // 设置中心点
                map.setZoom(10)
            }, 3000)
          }
        )
      })
    } catch (error) {
      console.log('地图加载失败', error)
    }
  }
  // #endif

  onMounted(async () => {
    await getData()
    // #ifdef H5
    await initMap()
    // #endif
  })
</script>

<template>
  <view class="timeline-page">
    <!-- 加载地图 -->
    <view id="map" class="uni-map"></view>
    <!--  end -->
    <cover-view class="timeline-meta">
      <cover-view class="status">{{ logisticsInfo.statusValue }}</cover-view>
      <cover-view class="extra">
        预计{{ logisticsInfo.estimatedTime }}送达 {{ logisticsInfo.name }} {{ logisticsInfo.awbNo }}
      </cover-view>
    </cover-view>
    <view class="timeline-detail">
      <view class="title">物流详情</view>
      <view class="timeline">
        <view class="line">
          <view class="badge text">收</view>
          <view class="content"> 收货地址：广东省广州市大华区明离路科技园880号 </view>
        </view>
        <view v-for="item in logisticsInfo.list" :key="item.id" class="line">
          <view class="badge dot" v-if="item.status <= 3"></view>
          <view class="badge icon" v-if="item.status === 4">
            <uni-icons color="#2cb5a5" custom-prefix="iconfont" type="icon-truck" />
          </view>
          <view class="badge icon" v-if="item.status === 5">
            <uni-icons color="#2cb5a5" custom-prefix="iconfont" type="icon-checked" />
          </view>
          <view class="label">{{ item.statusValue }}</view>
          <view class="content">{{ item.content }}</view>
          <view class="time">{{ item.createTime }}</view>
        </view>
      </view>
    </view>
  </view>
</template>

<style lang="scss">
  @import './index.scss';
</style>
